import React, { Component } from 'react'
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
export default class Editor extends Component {
  state = {
    editorState: '', // 设置编辑器初始内容
    outputHTML: '<p></p>'
  }
  handleChange = (editorState) => {
    this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML() // 必须调用 toHTML()
    })
  }
  render() {
    const { editorState, outputHTML } = this.state

    return (
      <div>
        <h1>富文本编辑器</h1>
        <div className="editor-wrapper">
          <BraftEditor
            value={editorState}
            onChange={this.handleChange}
          />
        </div>
        <h5>输出内容</h5>
        <div className="output-content">{outputHTML}</div>
        <h6>预览</h6>
        <div dangerouslySetInnerHTML= {{__html: outputHTML}}></div>
      </div>
    )

  }
}
